<!DOCTYPE html>
<html>
  <head>
    <title>成都市龙泉驿区北泉路社区社区医院医生管理系统</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../icofont/icofont.min.css" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/common.css" />
  </head>
  <body>
    <div class="container-fluid height100">
      <div class="header row bg-dark d-flex align-content-center">
        <div class="col-sm-2 text-white">
          <i class="icofont icofont-user-alt-4 text-success"></i> ，欢迎您。
        </div>
        <div class="col-sm-7 header-center text-center">
          <span class="text-success font-weight-bold size-20">
            成都市龙泉驿区北泉路社区社区医院家庭医生签约服务平台
          </span>
        </div>
        <div class="col-sm-3 text-white text-right">
          <span class="mx-3">
            <i class="icofont icofont-user-alt-5 text-primary"></i>
            账户设置</span
          >
          <span class="mx-3">
            <i class="icofont icofont-exit text-warning"></i>

            退出系统</span
          >
        </div>
      </div>
      <!-- #BUG:滚动条变化，下拉错误 -->
      <div class="content row">
        <!-- #NOTE: 侧边导航栏 -->
        <div class="left-nav col-lg-2 bg-dark px-1 text-white">
          <div class="accordion" id="accordionExample">
            <div class="card bg-secondary">
              <div class="card-header" id="heading1">
                <h2 class="mb-0 d-flex align-items-center">
                  <i
                    class="icofont icofont-dashboard size-20 text-white-50"
                  ></i>
                  <button
                    class="btn btn-link btn-block text-left text-white"
                    type="button"
                    data-toggle="collapse"
                    data-target="#collapse1"
                    aria-expanded="true"
                    aria-controls="collapse1"
                  >
                    工作台
                  </button>
                  <i class="icofont icofont-simple-down size-20"></i>
                </h2>
              </div>
            </div>
            <div class="card bg-secondary">
              <div
                class="card-header"
                id="heading2"
                data-toggle="collapse"
                data-target="#collapse2"
                aria-expanded="false"
                aria-controls="collapse2"
              >
                <h2 class="mb-0 d-flex align-items-center">
                  <i
                    class="icofont icofont-ui-settings size-20 text-white-50"
                  ></i>

                  <span
                    class="btn btn-link btn-block text-left collapsed text-white"
                  >
                    权限管理
                  </span>
                  <i class="icofont icofont-simple-down size-20"></i>
                </h2>
              </div>
              <div
                id="collapse2"
                class="collapse"
                aria-labelledby="heading2"
                data-parent="#accordionExample"
              >
                <div class="card-body pl-5">权限管理</div>
                <div class="card-body pl-5">角色管理</div>
                <div class="card-body pl-5">用户管理</div>
              </div>
            </div>
            <div class="card bg-secondary">
              <div class="card-header" id="heading3">
                <h2 class="mb-0 d-flex align-items-center">
                  <i class="icofont icofont-group size-20 text-white-50"></i>

                  <button
                    class="btn btn-link btn-block text-left collapsed text-white"
                    type="button"
                    data-toggle="collapse"
                    data-target="#collapse3"
                    aria-expanded="false"
                    aria-controls="collapse3"
                  >
                    医生团队管理
                  </button>
                  <i class="icofont icofont-simple-down size-20"></i>
                </h2>
              </div>
              <div
                id="collapse3"
                class="collapse"
                aria-labelledby="heading3"
                data-parent="#accordionExample"
              >
                <div class="card-body pl-5">家庭医生团队管理</div>
                <div class="card-body pl-5">家庭医生管理</div>
                <div class="card-body pl-5">医生职称管理</div>
              </div>
            </div>
            <div class="card bg-secondary">
              <div class="card-header" id="heading4">
                <h2 class="mb-0 d-flex align-items-center">
                  <i class="icofont icofont-table size-20 text-white-50"></i>

                  <button
                    class="btn btn-link btn-block text-left collapsed text-white"
                    type="button"
                    data-toggle="collapse"
                    data-target="#collapse4"
                    aria-expanded="false"
                    aria-controls="collapse4"
                  >
                    签约管理
                  </button>
                  <i class="icofont icofont-simple-down size-20"></i>
                </h2>
              </div>
              <div
                id="collapse4"
                class="collapse"
                aria-labelledby="heading4"
                data-parent="#accordionExample"
              >
                <div class="card-body pl-5">健康服务包管理</div>
                <div class="card-body pl-5">居民类别管理</div>
                <div class="card-body pl-5">签约居民列表</div>
              </div>
            </div>
            <div class="card bg-secondary">
              <div class="card-header" id="heading5">
                <h2 class="mb-0 d-flex align-items-center">
                  <i class="icofont icofont-database size-20 text-white-50"></i>

                  <button
                    class="btn btn-link btn-block text-left collapsed text-white"
                    type="button"
                    data-toggle="collapse"
                    data-target="#collapse5"
                    aria-expanded="false"
                    aria-controls="collapse5"
                  >
                    统计分析
                  </button>
                  <i class="icofont icofont-simple-down size-20"></i>
                </h2>
              </div>
              <div
                id="collapse5"
                class="collapse"
                aria-labelledby="heading5"
                data-parent="#accordionExample"
              >
                <div class="card-body pl-5">统计表</div>
                <div class="card-body pl-5">统计图</div>
              </div>
            </div>
          </div>
        </div>
        <!-- #NOTE: 右侧内容区 -->
        <div class="content-box col-lg-10">
          <div class="row">
            <div class="col px-0">
              <nav aria-label="breadcrumb width100">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <a href="#" class="text-success">权限管理</a>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">
                    用户管理
                  </li>
                </ol>
              </nav>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <h5 class="title-border border-bottom pb-2 pl-2 mb-3">
                用户列表
              </h5>
            </div>
          </div>
          <div class="row bg-light py-3">
            <div class="col">
              <form class="form-inline d-flex">
                <button type="button" class="btn btn-primary mr-2 btn-success add-btn">
                  <i class="icofont icofont-plus-circle text-warning mr-2"></i
                  >添加用户
                </button>
                <input
                  type="search"
                  class="form-control mr-2"
                  id="search"
                  placeholder="请输入用户名称或账号"
                />
                <button type="button" class="btn btn-primary mr-2">
                  <i class="icofont icofont-ui-search text-warning mr-2"></i
                  >查询
                </button>
              </form>
            </div>
            <div class="col text-right">
              <button type="button" class="btn btn-primary mr-2 btn-warning">
                <i class="icofont icofont-refresh text-light"></i>
              </button>
            </div>
          </div>
          <!-- NOTE: 表格内容 -->
          <div class="row bg-light mt-3 pt-3">
            <div class="col">
              <table class="table table-bordered text-center">
                <thead class="thead-light">
                  <tr>
                    <th scope="col"><input type="checkbox" /></th>
                    <th scope="col">用户账号</th>
                    <th scope="col">用户名称</th>
                    <th scope="col">用户状态</th>
                    <th scope="col">操作</th>
                  </tr>
                </thead>
                <tbody id="userTbody">
                  <!--  <tr>
                          <th scope="row">1</th>
                          <td>Mark</td>
                          <td>Otto</td>
                          <td>@mdo</td>
                        </tr>
                        <tr>
                          <th scope="row">2</th>
                          <td>Jacob</td>
                          <td>Thornton</td>
                          <td>@fat</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td>Larry</td>
                          <td>the Bird</td>
                          <td>@twitter</td>
                        </tr> -->
                </tbody>
              </table>
            </div>
          </div>
          <!-- NOTE: 分页 -->
          <div class="row bg-light pt-3 mt-3">
            <div class="col">
              <nav aria-label="Page navigation example">
                <ul id="userPagination" class="pagination justify-content-end">
                  <!-- <li class="page-item">
                    <a class="page-link" href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li> -->
                  <!-- <li class="page-item active"><a class="page-link" href="#">1</a></li>
                  <li class="page-item"><a class="page-link" href="#">2</a></li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li> -->
                  <!-- <li class="page-item">
                    <a class="page-link" href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li> -->
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- modal 角色选择 -->
    <div
      class="modal fade"
      id="modalSelectRoles"
      data-backdrop="static"
      data-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">角色选择</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- 内容 -->
            <div class="alert alert-warning" role="alert">
              <i class="fa fa-exclamation-triangle text-warning"></i>
              用户加入到角色后，将拥有该角色的所有权限！
            </div>
            <form class="form">
              <div class="form-group">
                <label for="username1"
                  ><span class="text-danger">*</span>用户账号</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="userName1"
                  readonly=""
                  value=""
                />
              </div>
              <div class="form-group">
                <label for="selectRoles2">选择角色:</label>
                <input
                  type="text"
                  class="form-control"
                  id="selectRoles2"
                  readonly=""
                />
              </div>
              <div class="text-warning">请选择角色：</div>
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th><input type="checkbox" id="checkAllAccess" /></th>
                    <th>角色名称</th>
                    <th>角色描述</th>
                  </tr>
                </thead>
                <tbody id="rolesTable">
                  <!-- <tr>
                    <td><input type="checkbox" value="1" /></td>
                    <td>管理员</td>
                    <td>系统管理员</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" value="2" /></td>
                    <td>院长</td>
                    <td>院长</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" value="3" /></td>
                    <td>医生</td>
                    <td>医生</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" value="4" /></td>
                    <td>护士</td>
                    <td>护士</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" value="5" /></td>
                    <td>普通员工</td>
                    <td>普通工作人员</td>
                  </tr>
                  <tr>
                    <td><input type="checkbox" value="11" /></td>
                    <td>dc</td>
                    <td>sdvcw</td>
                  </tr> -->
                </tbody>
              </table>
            </form>
          </div>
          <div class="modal-footer">
            <button
              id="rolesCancelBtn"
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              取消
            </button>
            <button id="rolesConfirmBtn" type="button" class="btn btn-primary">
              提交
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- modal 删除 -->
    <!-- modal 新增 -->
    <div
    class="modal fade"
    id="modalAddUser"
    data-backdrop="static"
    data-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">创建新用户</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- modal 内容 -->
          <form name="addUserInfoForm">
            <div class="form-group row">
              <label for="uacessno2" class="col-sm-3 col-form-label"
                >账号名称</label
              >
              <div class="col-sm-5">
                <input
                  type="text"
                  class="form-control"
                  id="uaccessno1"
                  name="uaccess"
                  aria-describedby="usernameHelp1"
                  
                />
              </div>
              <div class="col-sm-4">
                <small id="usernameHelp1" class="form-text text-muted mt-3"
                  >最多20个字符</small
                >
              </div>
            </div>
            <div class="form-group row">
              <label for="nickname1" class="col-sm-3 col-form-label"
                >姓名</label
              >
              <div class="col-sm-5">
                <input
                  type="text"
                  class="form-control"
                  id="nickname1"
                  name="uname"
                  aria-describedby="nicknameHelp1"
                />
              </div>
              <div class="col-sm-4">
                <small id="nicknameHelp1" class="form-text text-muted mt-3"
                  >最多20个字符</small
                >
              </div>
            </div>

            <div class="form-group row">
              <label for="password1" class="col-sm-3 col-form-label"
                >修改密码</label
              >
              <div class="col-sm-5">
                <input
                  type="password"
                  class="form-control"
                  id="password1"
                  name="upwd"
                  aria-describedby="passwordHelp1"
                />
              </div>
              <div class="col-sm-4">
                <small id="passwordHelp1" class="form-text text-muted mt-3"
                  >任意6位字符</small
                >
              </div>
            </div>

            <div class="form-group row">
              <label class="form-check-label col-sm-3 col-form-label"
                >性别</label
              >
              <div class="col-sm-9">
                <div
                  class="custom-control custom-radio custom-control-inline"
                >
                  <input
                    type="radio"
                    id="sex1"
                    name="usex"
                    value="男"
                    class="custom-control-input modify-sex"
                  />
                  <label class="custom-control-label" for="sex1">男</label>
                </div>
                <div
                  class="custom-control custom-radio custom-control-inline"
                >
                  <input
                    type="radio"
                    id="sex2"
                    name="usex"
                    value="女"
                    class="custom-control-input modify-sex"
                  />
                  <label class="custom-control-label" for="sex2">女</label>
                </div>
              </div>
            </div>
            <div class="form-group row">
              <label for="tel1" class="col-sm-3 col-form-label"
                >手机号码</label
              >
              <div class="col-sm-5">
                <input
                  type="text"
                  name="utel"
                  class="form-control"
                  id="tel1"
                  maxlength="11"
                  aria-describedby="telHelp1"
                />
              </div>
              <div class="col-sm-4">
                <small id="telHelp1" class="form-text text-muted mt-3"
                  >任意11位数字</small
                >
              </div>
            </div>
            <div class="form-group row">
              <label for="sid1" class="col-sm-3 col-form-label">身份证</label>
              <div class="col-sm-5">
                <input
                  type="text"
                  name="usid"
                  class="form-control"
                  id="sid1"
                  maxlength="18"
                  aria-describedby="sidHelp1"
                />
              </div>
              <div class="col-sm-4">
                <small id="sidHelp1" class="form-text text-muted mt-3"
                  >任意18位的身份证</small
                >
              </div>
            </div>
            <div class="form-group row">
              <label for="sid" class="col-sm-3 col-form-label">头像</label>
              <div class="col-sm-5">
                <input
                  type="file"
                  name="uphoto"
                  class="custom-file-input"
                  id="customFile1"
                />
                <label class="custom-file-label mx-3" for="customFile1"
                  >Choose file</label
                >
              </div>
              <div class="col-sm-4">
                <small id="sidHelp1" class="form-text text-muted mt-3"
                  >选择图片，修改头像</small
                >
              </div>
            </div>
            <div class="row">
              <div class="col-9 offset-3">
                <img
                  class="user-head-photo"
                  id="userModifyPhoto1"
                  src="../uploads/cat_1665296658597.jpeg"
                  alt=""
                />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button
            id="addCancelBtn"
            type="button"
            class="btn btn-secondary"
            data-dismiss="modal"
          >
            取消
          </button>
          <button id="addConfirmBtn" type="button" class="btn btn-primary">
            创建
          </button>
        </div>
      </div>
    </div>
  </div>
    <!-- modal 修改 -->
    <!-- Button trigger modal -->
    <!-- <button
      type="button"
      class="btn btn-primary"
      data-toggle="modal"
      data-target="#staticBackdrop"
    >
      Launch static backdrop modal
    </button> -->
    <!-- Modal -->
    <div
      class="modal fade"
      id="modalModifyUser"
      data-backdrop="static"
      data-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">修改用户信息</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <!-- 内容 -->
            <form name="modifyUserInfoForm">
              <div class="form-group row">
                <label for="uacessno2" class="col-sm-3 col-form-label"
                  >账号名称</label
                >
                <div class="col-sm-5">
                  <input
                    type="text"
                    class="form-control"
                    id="uacessno2"
                    name="uacessno2"
                    aria-describedby="usernameHelp2"
                    readonly=""
                  />
                </div>
                <div class="col-sm-4">
                  <small id="usernameHelp2" class="form-text text-muted mt-3"
                    >最多20个字符</small
                  >
                </div>
              </div>
              <div class="form-group row">
                <label for="nickname2" class="col-sm-3 col-form-label"
                  >姓名</label
                >
                <div class="col-sm-5">
                  <input
                    type="text"
                    class="form-control"
                    id="nickname2"
                    name="uname"
                    aria-describedby="nicknameHelp2"
                  />
                </div>
                <div class="col-sm-4">
                  <small id="nicknameHelp2" class="form-text text-muted mt-3"
                    >最多20个字符</small
                  >
                </div>
              </div>

              <div class="form-group row">
                <label for="password2" class="col-sm-3 col-form-label"
                  >修改密码</label
                >
                <div class="col-sm-5">
                  <input
                    type="password"
                    class="form-control"
                    id="password2"
                    name="upwd"
                    aria-describedby="passwordHelp2"
                  />
                </div>
                <div class="col-sm-4">
                  <small id="passwordHelp2" class="form-text text-muted mt-3"
                    >任意6位字符</small
                  >
                </div>
              </div>

              <div class="form-group row">
                <label class="form-check-label col-sm-3 col-form-label"
                  >性别</label
                >
                <div class="col-sm-9">
                  <div
                    class="custom-control custom-radio custom-control-inline"
                  >
                    <input
                      type="radio"
                      id="sex3"
                      name="usex"
                      value="男"
                      class="custom-control-input modify-sex"
                    />
                    <label class="custom-control-label" for="sex3">男</label>
                  </div>
                  <div
                    class="custom-control custom-radio custom-control-inline"
                  >
                    <input
                      type="radio"
                      id="sex4"
                      name="usex"
                      value="女"
                      class="custom-control-input modify-sex"
                    />
                    <label class="custom-control-label" for="sex4">女</label>
                  </div>
                </div>
              </div>
              <div class="form-group row">
                <label for="tel2" class="col-sm-3 col-form-label"
                  >手机号码</label
                >
                <div class="col-sm-5">
                  <input
                    type="text"
                    name="utel"
                    class="form-control"
                    id="tel2"
                    maxlength="11"
                    aria-describedby="telHelp2"
                  />
                </div>
                <div class="col-sm-4">
                  <small id="telHelp2" class="form-text text-muted mt-3"
                    >任意11位数字</small
                  >
                </div>
              </div>
              <div class="form-group row">
                <label for="sid2" class="col-sm-3 col-form-label">身份证</label>
                <div class="col-sm-5">
                  <input
                    type="text"
                    name="usid"
                    class="form-control"
                    id="sid2"
                    maxlength="18"
                    aria-describedby="sidHelp2"
                  />
                </div>
                <div class="col-sm-4">
                  <small id="sidHelp2" class="form-text text-muted mt-3"
                    >任意18位的身份证</small
                  >
                </div>
              </div>
              <div class="form-group row">
                <label for="sid" class="col-sm-3 col-form-label">头像</label>
                <div class="col-sm-5">
                  <input
                    type="file"
                    name="uphoto"
                    class="custom-file-input"
                    id="customFile2"
                  />
                  <label class="custom-file-label mx-3" for="customFile2"
                    >Choose file</label
                  >
                </div>
                <div class="col-sm-4">
                  <small id="sidHelp2" class="form-text text-muted mt-3"
                    >选择图片，修改头像</small
                  >
                </div>
              </div>
              <div class="row">
                <div class="col-9 offset-3">
                  <img
                    class="user-head-photo"
                    id="userModifyPhoto"
                    src=""
                    alt=""
                  />
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              id="modifyCancelBtn"
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              取消
            </button>
            <button id="modifyConfirmBtn" type="button" class="btn btn-primary">
              修改
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="../js/userlist.js"></script>
  </body>
</html>
